<template>
    <Header />
    <div class="br">

    </div>
    <div class="br-search">
        <el-input v-model="search.name" style="max-width: 600px;height: 64px" placeholder="搜索名称、作者、标签..."
            @change="searchChange" class="input-with-select">
            <template #prefix>
                <el-icon class="el-input__icon">
                    <search />
                </el-icon>
            </template>
            <!-- <template #append>
                    <el-select v-model="categoryId" style="width: 80px;">
                        <el-option v-for="category in categories" :label="category.name" :value="category.id" />
                    </el-select>
                </template> -->
        </el-input>
        <!-- <div style="height: 32px;line-height: 32px;border-left: 1px #e7e7e9 solid;margin: 16px;">
            <el-select v-model="categoryId" style="width: 80px;border: none;">
                <el-option style="width: 100px;text-align: center;" v-for="category in categories"
                    :label="category.name" :value="category.id" />
            </el-select>
        </div> -->
    </div>
    <div class="category">
        <div class="category-item" :class="category.id == search.categoryId ? 'category-active' : ''"
            v-for="category in homeCategories" @click="categoryChange(category.id)">
            {{
            category.name }}</div>
    </div>

    <div class="box">
        <ul v-infinite-scroll="load" class="infinite-list" infinite-scroll-distance="30">

            <li v-for="photo in photos" :key="photo.id" class="infinite-list-item" @click="toPhoto(photo.id)">
                <el-image style="border-radius: 10px;position: absolute;height: 275px;width: 412px;"
                    :src="api.show + imageUrl(photo.fileId)">
                </el-image>
                <p class="item-title">{{ photo.name }}</p>
                <div class="left" style="position:absolute;bottom: 5px;width: 100%;">
                    <div style="width: 80%;line-height: 36px;display: flex;justify-self: start;">
                        <el-avatar style="margin: 6px;" :size="24" :src="api.show + photo.userAvatar" />
                        <p style="font-size: 14px;">{{ photo.userName }}</p>
                    </div>
                    <div style="font-size: 12px;color: #555564;display: flex;justify-content: space-between;">
                        <p style="width: 60px;">
                            <svg class="icon like" aria-hidden="true" @click="likeChange(photo.id)">
                                <use xlink:href="#icon-like"></use>
                            </svg>
                            &nbsp;
                            {{ photo.likeCount }}
                        </p>
                        <p style="width: 60px;">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-watch"></use>
                            </svg>&nbsp;{{ photo.watchCount }}
                        </p>
                    </div>
                </div>
            </li>
        </ul>
        <!-- <p v-if="loading">Loading...</p> -->
    </div>



    <!-- 投稿 -->
    <div class="floating-buttons">
        <a href="#" class="button" @click="uploadShow">投稿</a>
        <!-- <a href="#" class="button">2</a>
        <a href="#" class="button">3</a> -->
    </div>



    <el-dialog v-model="uploadDialog" title="发布作品" width="800">
        <el-form ref="ruleFormRef" :rules="rules" :model="data" label-width="auto"
            style="max-width: 700px;margin: auto;">
            <el-row>
                <el-col :span="10">
                    <el-form-item label="标题" prop="name">
                        <el-input v-model="data.name" />
                    </el-form-item></el-col>
                <el-col :span="2"></el-col>
                <el-col :span="12">
                    <el-form-item label="类别" prop="gategoryId">
                        <el-select v-model="data.categoryId" style="width: 80px;border: none;">
                            <el-option style="width: 100px;text-align: center;" v-for="category in categories"
                                :label="category.name" :value="category.id" />
                        </el-select>

                    </el-form-item>

                </el-col>
            </el-row>
            <el-form-item label="标签" prop="tag">
                <el-input v-model="data.tagTemp" @change="tagChange" />
                <el-scrollbar>
                    <div class="scrollbar-flex-content">
                        <el-tag v-for="(item, index) in tags" closable @close="tagClose(index)" type="success"
                            class="scrollbar-demo-item">{{ item
                            }}</el-tag>
                    </div>
                </el-scrollbar>

            </el-form-item>

            <el-form-item label="内容" prop="description">
                <el-input type="textarea" v-model="data.description" />
            </el-form-item>

            <el-form-item prop="fileId">
                <el-upload v-model:file-list="fileList" class="upload-demo" :action="api.upload"
                    :on-preview="handlePreview" :on-remove="handleRemove" :limit="10" :on-success="uploadSuccess"
                    list-type="picture">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            文件限制10个,文件大小不能超过10MB
                        </div>
                    </template>

                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button style="margin: 10px 0 0 90%;" type="primary" @click="submit(ruleFormRef)">发布</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>

<script setup>
import { Search, Plus } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import Header from '@/components/Header.vue'
import api from './api'
import { ElMessage } from 'element-plus'
import '@/assets/iconfont.js'
import { useRouter } from 'vue-router'
import user from "@/utils/userUtil"
const isLogin = ref(user.getToken() != null ? true : false)
const router = useRouter()
const toPhoto = (id) => {
    router.push({ name: 'photo', params: { id: id } })
}

const searchChange = () => {
    getPhoto()
}

//作品数据
const photos = ref([])
const search = ref({
    name: '',
    categoryId: 0,
    index: 1,
    size: 8
})
const loading = ref(false)
const isBottom = ref(false)
const load = () => {
    if (isBottom.value) {
        return
    }

    if (loading.value) {
        return
    }
    loading.value = true
    setTimeout(() => {
        search.value.size += 8
        getPhoto()
        loading.value = false
    }, 400)

}
const imageUrl = (images) => {
    const image = images.split(',')
    return image[0]
}

const getPhoto = () => {
    api.getPhoto(search.value).then(res => {
        if (res.success) {
            if (search.value.size - res.datas.length >= 8) {
                search.value.size -= 8
                if (search.value.size < 8) {
                    search.value.size = 8
                }
                // isBottom.value = true
                // ElMessage({
                //     type: 'warning',
                //     message: '到底了!'
                // })
                // return
            }
            photos.value = res.datas
            // likes.value = []
            // photos.value.forEach(item => {
            //     likes.value.push({
            //         id: item.id,
            //         value: false
            //     })
            // })
        }
    })
}
getPhoto()

// const likeChange = (id) => {
//     api.like(id)
// }
// const likes = ref([])
// const isLike = (id) => {
//     return likes.value.find(x => x.id == id).value
// }

//类别数据
const categories = ref([])
const homeCategories = ref([])
const getCategory = () => {
    api.getCategory().then(x => {

        categories.value = JSON.parse(JSON.stringify(x.datas))
        homeCategories.value = x.datas
        homeCategories.value.find(x => x.id == 0).name = '全部'
    })
}
getCategory()
const categoryChange = (id) => {
    search.value.categoryId = id
    search.value.index = 1
    photos.value = []
    isBottom.value = false
    getPhoto()
}
const searchName = ref('')

//投稿
const ruleFormRef = ref()
//表单校验
import rule from './rules.js'
const rules = reactive(rule.rules)

const submit = async (formEl) => {
    data.value.tag = ''
    tags.value.forEach((item, index) => {
        if (index == 0) {
            data.value.tag = item
        } else {
            data.value.tag += ',' + item
        }
    })
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            api.add(data.value).then(res => {
                if (res.success) {
                    ElMessage({
                        type: 'success',
                        message: "发布成功!"
                    })
                    uploadDialog.value = false
                    getPhoto()
                } else {
                    ElMessage({
                        type: 'error',
                        message: res.message
                    })
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const uploadDialog = ref(false)
const uploadShow = () => {
    if (!isLogin.value) {
        ElMessage({ type: 'error', message: "请先登录!" })
        return
    }
    data.value = {
        name: '',
        tagTemp: '',
        tag: '',
        fileId: '',
        description: '',
        categoryId: 0
    }
    tags.value = []
    fileList.value = []
    uploadDialog.value = true
}
const uploadSuccess = (response) => {
    if (data.value.fileId == '') {
        data.value.fileId = response.data
    } else {
        data.value.fileId += ',' + response.data
    }
    console.log(data.value.fileId)
}
const tags = ref([])
const data = ref({})
const fileList = ref([])
const handleRemove = (uploadFile, uploadFiles) => {
    data.value.fileId = ''
    uploadFiles.forEach((file, index) => {
        console.log(file)
        console.log(index)
        if (index == 0) {
            data.value.fileId = file.response.data
        } else {
            data.value.fileId += ',' + file.response.data
        }
    });
}
const handlePreview = (file) => {
    console.log(file)
}

//标签
const tagChange = () => {
    if (tags.value.length == 5) {
        return
    }

    tags.value.push(data.value.tagTemp)
    data.value.tagTemp = ''
    console.log(tags.value)
    if (tags.value.length > 0) {
        data.value.tag = '1'
    }
}

const tagClose = (index) => {
    tags.value.splice(index, 1)
    console.log(tags.value)
}



</script>
<style>
.like:hover {
    cursor: pointer;
}

.icon {
    width: 18px;
    height: 18px;
    vertical-align: -0.3em;
    margin-top: 10px;
    fill: currentColor;
    overflow: hidden;
}

.box {
    margin: 30px 0;
    background-color: white;
}

.box .infinite-list .infinite-list-item:hover {
    cursor: pointer;
}

.box .infinite-list {
    /* height: 300px; */
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.box .infinite-list .infinite-list-item {
    /* display: flex; */
    align-items: center;
    justify-content: center;
    /* height: 300px; */
    background: var(--el-color-primary-light-9);
    margin: 30px 13.5px 0px 14px;
    color: var(--el-color-primary);
    width: 412px;
    height: 320px;
    position: relative;
}

.box .infinite-list .infinite-list-item .left {
    height: 36px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
}


/* .infinite-list .infinite-list-item {
    margin-top: 10px;
} */

.infinite-list .infinite-list-item .item-title {
    /* position: absolute; */
    bottom: 44px;
    /* left: 20px; */
    padding-left: 20px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: white;
    width: 95%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(0, 0, 0, .5));
    overflow: hidden;
    border-radius: 10px;

}

.infinite-list .infinite-list-item:hover .item-title {
    position: absolute;
}






/* .scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
} */

.el-form-item__content {
    display: block;
}

.scrollbar-demo-item {
    margin-right: 10px;
}

.floating-buttons {
    position: fixed;
    right: 20px;
    bottom: 120px;
    z-index: 9999;
}

.floating-buttons .button {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #bdbdbd;
    border-radius: 50%;
    margin-bottom: 10px;
    text-align: center;
    line-height: 50px;
    color: #f1f1f1;
    font-size: 16;
    text-decoration: none;
}

.floating-buttons .button:hover {
    background-color: #ff385c;
}
</style>

<style>
.category {
    width: 60%;
    margin: auto;
    padding: 30px 72px 0 72px;
    display: flex;
    justify-content: space-between;
}

.category-active {
    background-color: #f8f7f4;
}

.category-item {
    font-size: 16px;
    border-radius: 20px;
    width: 120px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}

.category-item:hover {
    cursor: pointer;
}

.br {
    background-color: #e8f2fd;
    width: 100%;
    height: 80px;
}

.br-search .el-select__wrapper {
    box-shadow: none;
}

.br-search .el-select__wrapper:hover {
    box-shadow: none;
}

.br-search .el-input__wrapper {
    box-shadow: none;
}

.br-search {
    display: flex;
    background-color: white;
    width: 630px;
    border-radius: 10px;
    margin: -40px auto 0 auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.box {
    padding: 0 72px;
}
</style>
